<template >
<div style="text-align: left;">
  <!-- <el-card class="showThisQuestion"
           style="margin:0px;padding: 20px 30px 0px 30px;text-align: left;"> -->
  
    <div style="margin-bottom: 10px;text-align: left;font-weight: bold;font-size:17px;line-height: 1.3;display: block;">
      <span v-show="item.optional" style="color:red;font-size: 20px;float:left;">* </span>
      <span v-show="autoId">{{num+1}}.</span><span>{{item.title}}</span><span style="color:orange;" v-show="item.questionScore != 0">（{{item.questionScore}}分）</span>
    </div>
    
       <div v-if="item.remark.trim()!=''" style="margin-bottom: 20px;text-align: left;font-size:14px;line-height: 1.3;color:grey;display: block;">
      说明：{{item.remark}}
    </div>
  
   

    <div style="padding: 0;margin: 0 0 10px 0;display: block;" >
      <el-radio-group v-model="radio"> 
        <el-radio
            v-for="(option) in item.option"
            :key="option.id"
            :label="option.id"
            disabled
            style="margin:0 0 5px 0;display: block;"
        >{{option.description}}</el-radio>
      </el-radio-group>
    </div>


<!-- 答案 -->

 <div v-show="item.judge != null">
   <div class="right" v-show="item.judge">
     <i class="el-icon-circle-check" style="float:left;margin-left:5px;color:green;font-size: 30px;"></i>&nbsp;
     <span>回答正确</span> 
     <div style="float:right;">+{{item.questionScore}}</div>
     </div>
  <div class="wrong" v-show="!item.judge">
    <i class="el-icon-circle-close" style="float:left;margin-left:5px;color:red;font-size: 30px;">
      </i>&nbsp;&nbsp;&nbsp;<span>回答错误</span> 
      <div style="float:right;margin-right:5px;">+0分</div>
      </div>
  <div class="answer" v-show="!item.judge">
    <span style="color:green;margin-left:15px;">正确答案:</span>
    <br><span style="margin-left:50px;">{{item.right_answer}}</span></div>
 </div>
 
  </div>
</template>

<script>

export default {
  name:'SingleChoice',
  components:{
    
  },
  data(){
    return{
      radio:0
    }
  },
  props:{
    item:Object,
    id:Number,
    editIcon:String,
    autoId:Boolean,
    num:Number
  },
  computed:{
  
  },
  mounted(){
    console.log('1')
    console.log(this.item)
    this.radio=this.item.userAnswer
  },
  methods:{
    
  }
}
</script>
<style>
.right{
  background-color: rgb(244, 245, 244);
  width:95%;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  color: green;
}
.right span{
  display: block;
  float: left;
  margin-left: 5px;

}
.wrong{
   background-color: rgb(244, 245, 244);
  width:95%;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  color: red;
}
.wrong span{
  display: block;
  float: left;
  margin-left: 5px;
}
.answer{
  margin-top: 5px;
  background-color: rgb(244, 245, 244);
  width:95%;
  height: 80px;
  line-height: 30px;
  border-radius: 5px;
  color: green;
}
</style>